<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>智能导诊</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="/lobsteruiframe/weui/css/weui.css" />
    <link rel="stylesheet" href="/lobsteruiframe/weui/css/weuix.css" />
    <script src="/lobsteruiframe/weui/js/zepto.min.js"></script>
    <script src="/lobsteruiframe/weui/js/zepto.weui.js"></script>
    <script src="/lobsteruiframe/weui/js/swipe.js"></script>
    <script src="/lobsteruiframe/weui/js/macy.js"></script>
    <script src="/jslib/lobster.js"></script>
    <script src="../js/template-web.js"></script>
    <script src="../js/ai.js?version=1.0"></script>
</head>

<body>
    <div class='pageFix'></div>
    <div class="columnflex">
        <div style="position: relative;">
            <div class="flextop">
                <image src="../images/indexhead4.jpg"></image>
            </div>
            <div class="flexbg">
                <div class="flexcont">
                    <div class="tit textBlue">
                        <image src="../images/title_icon.png"></image> <text> 自助智能导诊 </text>
                        <image src="../images/title_icon.png"></image>
                    </div>
                    <div class="desc textBlue">
                        <div>身体不舒服，但不知道挂什么科室？</div>
                        <div>无需担忧！只需以下几步</div>
                    </div>
                    <div class="step">
                        <div style="display: flex;"><text style="display:inline-block">1</text> 选择性别，进入人体界面</div>
                        <div style="display: flex;"><text style="display:inline-block">2</text> 选择主部位 -> 具体部位 -> 对应症状
                        </div>
                        <div style="display: flex;"><text style="display:inline-block">3</text> 点击推荐科室 -> 选择医生挂号</div>
                    </div>
                </div>
                <div class="flexbtm">
                    <div class="sexman sele" data-type="1">
                        <image src="../images/m3.png"></image>
                        <div>男性</div>
                    </div>
                    <div class="sexwm sele" data-type="2">
                        <image src="../images/w3.png"></image>
                        <div>女性</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<style>
    .columnflex {
        flex-direction: column;
        height: 100%;
        box-sizing: border-box;
    }

    .flextop img {
        width: 100%;
        height: 72px;
        border-radius: 0 0 20px 20px;
    }


    .flexbg {
        position: absolute;
        top: 20px;
        left: 2%;
        width: 96%;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0px 0px 2px #e1e1e1;
    }

    .flexbtm img {
        width: 80px;
        height: 80px;
        margin-bottom: 10px;
    }

    .flexbtm {
        font-size: 16px;
        padding: 75px 15px 50px 15px;
        text-align: center;
        display: flex;
        justify-content: space-around;
        color: #4990e2;
    }

    .flexcont {
        padding-top: 15px;
    }

    .flexcont .tit {
        font-size: 18px;
        text-align: center;
        line-height: 50px;
        margin-top: 25px;
    }

    .flexcont .tit image {
        height: 16px;
        width: 23px;
        display: inline-block;
        vertical-align: middle;
        margin-top: -5px;
    }

    .flexcont .desc {
        text-align: center;
        font-size: 15px;
        line-height: 30px;
        margin-bottom: 25px;
    }

    .flexcont .step {
        font-size: 15px;
        padding-top: 30px;
        padding-left: 50px;
        line-height: 19px;
        color: #999;
    }

    .flexcont .step view {
        list-style: decimal;
        display: flex;
        margin-bottom: 10px;
    }

    .flexcont .step text {
        line-height: 16px;
        vertical-align: middle;
        border: 1px solid #999;
        width: 16px;
        height: 16px;
        border-radius: 9px;
        text-align: center;
        margin-right: 5px;
        font-size: 14px;
    }
</style>

</html>
<script>


    var controller = {
        data: {

        },
        //初始化页面
        initpage: function () {
            var self = this;
            ai.getSymptom();
            self.initevent();
        },
        //初始化事件
        initevent: function () {
            var self = this;
            $(".sele").click(function () {
                location.href = "position.html?type=" + $(this).data("type");
            })
        },
    }
    $(function () {
        controller.initpage();
    })
</script>